<template>
	<div id="phone">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>修改手机号</p>
		</div>
		<div v-if="phoneStep == 1" class="phone_step">
			<div class="old_phone">
				<p><span>手机号：</span>{{encryptionPhone(oldPhone)}}</p>
			</div>
			<div class="verification">
				<input type="text" v-model="verification" placeholder="请输入验证码" />
				<input v-show="verificationShow" @click="getCode" type="button" value="获取验证码" />
				<input v-show="!verificationShow" type="button" v-model="getVerification" />
			</div>
			<input class="sub" @click="next" type="button" value="下一步" />
		</div>
		<div v-else class="phone_step">
			<div class="new_phone">
				<input type="tel" placeholder="请输入新的手机号码" v-model="newPhone" />
			</div>
			<div class="verification">
				<input type="text" v-model="verification" placeholder="请输入验证码" />
				<input v-show="verificationShow" @click="getCode" type="button" value="获取验证码" />
				<input v-show="!verificationShow" type="button" v-model="getVerification" />
			</div>
			<input @click="sub" class="sub" type="button" value="提交" />
		</div>
	</div>
</template>

<script>
export default{
	name: 'phone',
	data:function(){
		return{
			phoneStep: 1,//修改手机号步骤
			oldPhone: '',//旧手机号码
			verification: '',//验证码
			getVerification: '60s后重新获取',//获取验证码
			verificationShow: true,//获取验证码切换
			newPhone: '',//新手机号码
			keyCode: '', // 后台返回的加密后的手机验证码
		}
	},
	methods:{
		//-------下一步---------
		next:function(){
			if(!this.keyCode){
				this.$alert('请获取验证码');
			}else if(!this.verification){
				this.$alert('请输入验证码');
			}else{
				this.checkCode();
			}
		},
		//---------提交----------
		sub:function(){
			var reg=11 && /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
			if(!this.newPhone){
				this.$alert('请输入新手机号码');
			}else if(!reg.test(this.newPhone)){
				this.$alert('请输入正确的手机号码');
			}else if(!this.verification){
				this.$alert('请输入验证码');
			}else{
				this.updatePhone();
			}
		},
		//-------手机号加密----------
		encryptionPhone:function(str){
			if(str == undefined){
				return;
			}
			var str1 = str.split('');
			var str2 = '';
			$.each(str1,function(i){
				if(i<3||i>7){
					str2 += str1[i];
				}else{
					str2 += '*';
				}
			})
			return str2;
		},
		//--------获取验证码倒计时-------
		countDown:function(){
			var time = 60;
			var _this = this;
			var phoneStep = _this.phoneStep;
			_this.verificationShow = false;
			_this.getVerification = '60s后重新获取';
			var Time = setInterval(function(){
				if(time == 1){
					_this.verificationShow = true;
					time = 60;
					clearTimeout(Time);
				}else{
					time -- ;
					_this.getVerification = time + 's后重新获取';
				};
				if(_this.phoneStep != phoneStep){
					clearTimeout(Time);
				}
			},1000);
		},
		// 获取原手机号
		getUserInfo: function(){
			var _this = this;
			_this.$axios.post("/user/info/getBaseInfo").then(function(res){
				var data = res.data;
				console.log(data.result);
				if(data.message == "succ"){
					_this.oldPhone = data.result.phone;
				}
			}).catch(function(err){
				console.log(err);
			});
		},
		//--------获取验证码-------
		getCode: function(){
			this.countDown();
			var _this = this;
			
			var phone;
			if(_this.phoneStep == 1){
				phone = _this.oldPhone;
			}else{
				phone = _this.newPhone;
			}
			
			let postData = _this.$qs.stringify({
				phone: phone
			});
			_this.$axios.post("/sms/public/phoneCode", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.keyCode = data.result;
				}
			}).catch(function(err){
				console.log(err);
			});
		},
		//--------验证手机验证码-------
		checkCode: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				code: _this.verification,
				keyCode: _this.keyCode
			});
			_this.$axios.post("/user/info/checkCode", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					if(_this.phoneStep == 1){
						// 下一步
						_this.phoneStep = 2;
						_this.verification = '';
						_this.verificationShow = true;
					}else{
						// 修改手机号
						_this.updatePhone();
					}
				}else{
					_this.$alert(data.result);
				}
			}).catch(function(err){
				console.log(err);
			});
		},
		//--------修改手机号-------
		updatePhone: function(){
			this.$loading();
			var _this = this;
			let postData = _this.$qs.stringify({
				phone: _this.newPhone,
				code: _this.verification,
				keyCode: _this.keyCode
			});
			_this.$axios.post("/user/info/updatePhone", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.$alert("修改成功");
					$("#alert_confirm").click(function(){
						_this.$router.push('/user/account');
					});
				}else{
					_this.$alert(data.result);
				}
				$("#loading").remove();
			}).catch(function(err){
				console.log(err);
			});
		}
	},
	created: function(){
		this.getUserInfo();
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#phone{
	height: 100%;
	padding-top: 5rem;
	box-sizing: border-box;
	background-color: #fff;
}

.phone_step{
	width: 90%;
	margin: 0 auto;
}
.phone_step .old_phone{
	font-size: 1.2rem;
	color: #4F4F4F;
	display: flex;
	align-items: center;
	margin-top: 1rem;
}
.phone_step .old_phone p span{
	margin-right: 0.5rem;
}
.phone_step .new_phone{
	margin-top: 1rem;
}
.phone_step .new_phone input{
	width: 100%;
	height: 3rem;
	border: 1px solid #EEEEEE;
	padding-left: 1rem;
	box-sizing: border-box;
}
.phone_step .verification{
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1rem;
}
.phone_step .verification input[type='text']{
	height: 3rem;
	width: 55%;
	border: 1px solid #EEEEEE;
	padding-left: 1rem;
	box-sizing: border-box;
	font-size: 1.2rem;
}
.phone_step .verification input[type='button']{
	height: 3rem;
	width: 40%;
	border: 1px solid #FF6565;
	color: #FF6565;
	background-color: #fff;
	box-sizing: border-box;
	font-size: 1.2rem;
	border-radius: 0;
}
.sub{
	width: 100%;
	height: 3.6rem;
	background-color: #FF6565;
	color: #FFFFFF;
	border: none;
	border-radius: 0;
	font-size: 1.2rem;
	margin-top: 1rem;
}
</style>